import React, { PureComponent as Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import axios from 'axios';
import {
  Table,
  Button, Col, Row,
  DatePicker, Select, Input
  // Modal,
  // message,
  // Tooltip,
  // Icon
} from 'antd';
import {
  fetchInterfaceListByCondition
} from '../../../../reducer/modules/dubboInterface.js';
import { Link } from 'react-router-dom';
// import variable from '../../../../constants/variable';
import './Edit.scss';
// import {formatTime} from "../../../../common";
// import Label from '../../../../components/Label/Label.js';
import moment from "moment";
const Option = Select.Option;
// const limit = 20;

@connect(
  state => {
    return {
      curProject: state.dubboProject.currProject
    };
  },
  {
    fetchInterfaceListByCondition
  }
)
class InterfaceSearch extends Component {
  constructor(props) {
    super(props);
    this.state = {
      onlinedate:null,
      status:null,
      classname:"",
      resultInterfaceList:[] //查询结果接口列表，默认为所有接口
      // isConditionReset:false //查询条件是否被重置的标记（暂时弃用）
    };
  }

  static propTypes = {
    match: PropTypes.object,
    curProject:PropTypes.object,
    resultInterfaceList:PropTypes.array,
    fetchInterfaceListByCondition:PropTypes.func
  };

  // handleRequest = async props => {
  //   const { params } = props.match;
  //   if (!params.actionId) {
  //     // let projectId = params.id;
  //     this.setState({
  //       catid: null
  //     });
  //     // let option = {
  //     //   page: this.state.current,
  //     //   limit,
  //     //   project_id: projectId
  //     // };
  //
  //   } else if (isNaN(params.actionId)) {
  //     let catid = params.actionId.substr(4);
  //     this.setState({ catid: +catid });
  //     // let option = {
  //     //   page: this.state.current,
  //     //   limit,
  //     //   catid
  //     // };
  //
  //
  //   }
  // };


  componentWillMount() {
    this.handleSearch();
  }

  componentWillReceiveProps() {
    this.handleSearch();
  }


  handleDateChange = (onlinedate) => {
    if(onlinedate != null){
      this.setState({
        onlinedate:moment(onlinedate).format('YYYY-MM-DD')
      })
    }
    else {
      this.setState({
        onlinedate: onlinedate
      })
    }
  };


  handleStatusChange = (status) => {
    this.setState({
      status:status
    })
  };

  handleClassnameChange = (event) => {
    let classname = event.target.value;

    this.setState({
      classname:classname
    })
  };

  handleSearch = () => {
    let projectid = this.props.curProject._id;
    this.props.fetchInterfaceListByCondition(projectid,this.state.onlinedate,this.state.status,this.state.classname).then(r=>{
      this.setState({
        resultInterfaceList:r.payload.data.data
      })
    });
  };

  exportJava = () => {
    let projectid = this.props.curProject._id;
    axios.post('/api/dubboproject/returnString').then(
      res => {
        let exporturl = res.data.data.string + projectid;
        window.location.href = exporturl;
      }
    )
  };

  handleReset = () => {

    this.setState({
      onlinedate:null,
      status:null
    })

  };



  render() {

    const columns = [
      {
        title: '接口名称',
        dataIndex: 'cname',
        key: 'cname',
        width: 30,
        render: (text, item) => {
          return (
            <Link to={'/dubboproject/' + this.props.curProject._id + '/interface/api/cat_' + item._id}>
              <span className="path">{text}</span>
            </Link>
          );
        }
      },
      {
        title: '接口类名',
        dataIndex: 'classname',
        key: 'classname',
        width: 50,
        render: (text, item) => {
          return (
            <Link to={'/dubboproject/' + this.props.curProject._id + '/interface/api/cat_' + item._id}>
              <span className="path">{text}</span>
            </Link>
          );
        }
      },
      {
        title: '接口状态',
        dataIndex: 'status',
        key: 'status',
        width: 20,
        render: (text) => {
          let status = '未知';
          let className = 'path';
          switch (text) {
            case 0:
              status = '设计中';
              className="tag-status design";
              break;
            case 1:
              status = 'sit测试';
              className="tag-status insit";
              break;
            case 2:
              status = 'uat测试';
              className="tag-status inuat";
              break;
            case 3:
              status = '已上线';
              className="tag-status online";
          }
          return (
            <span className={className}>{status}</span>

          );
        }
      },
      {
        title: '上线时间',
        dataIndex: 'onlinedate',
        key: 'onlinedate',
        width: 20,
        render: (text) => {
          return (
            <span className="path">{text}</span>
          );
        }
      }
    ];


    let dataSource = this.state.resultInterfaceList;
    // let total = 0;
    dataSource = dataSource.map(item => {
      item.key = item._id;
      return item;
    });

    // const pageConfig = {
    //   total: total,
    //   pageSize: limit,
    //   current: this.state.current,
    //   onChange: this.changePage
    // };


    return (
      <div style={{ padding: '24px' }}>

        <h2 className="interface-title" style={{ marginTop: 0 }}>
          接口查询
        </h2>

        <div className="panel-view">
          <Row className="row">
            <Col span={5} className="colKey">
              上线时间
            </Col>
            <Col span={5} className="colName">
              <DatePicker onChange={this.handleDateChange}/>
            </Col>
            <Col span={5} className="colKey">
              接口状态
            </Col>
            <Col span={5} className="colName">
              <Select defaultValue={"所有状态"} onChange={this.handleStatusChange}>
                <Option value = {null}>所有状态</Option>
                <Option className="tag-status design" value = {0}>设计中</Option>
                <Option className="tag-status insit" value = {1}>sit测试</Option>
                <Option className="tag-status inuat" value = {2}>uat测试</Option>
                <Option className="tag-status online" value = {3}>已上线</Option>
              </Select>
            </Col>
            <Col span={3} className="colKey">
              接口类名(中英)
            </Col>
            <Col span={5} className="colName">
              <Input onChange={this.handleClassnameChange} />
            </Col>
          </Row>
        </div>

        <br/>

        <div align="center">
          <Button
          style={{ float: 'left' }}
          type="primary"
          onClick={this.handleSearch}
        >
          查询
          </Button>

        &nbsp;&nbsp;&nbsp;

          {/*<Button*/}
          {/*  // style={{ float: 'right' }}*/}
          {/*  type="primary"*/}
          {/*  onClick={this.handleReset}*/}
          {/*>*/}
          {/*  重置条件*/}
          {/*</Button>*/}


          <Button
          style={{ float: 'right' }}
          type="primary"
          onClick={this.exportJava}
        >
          JAVA接口导出
          </Button>

        &nbsp;&nbsp;&nbsp;

          <br/><br/><br/>
        </div>

        <h2 className="interface-title" style={{ marginTop: 0 }}>
          接口列表 ({this.state.resultInterfaceList.length}个）
        </h2>

        <Table
          className="table-interfacelist"
          // pagination={pageConfig}
          columns={columns}
          dataSource={dataSource}
        />

      </div>
    );
  }
}

export default InterfaceSearch;
